<template>
	<view class="qilin-card-rightOperate">
		<view class="box-item">
			<view class="box-item-image">
				<image src="@/static/imgs/avator.jpg" alt="" />
				<view class="iconfont icon-jia guanzhu" v-show="!isFollow" @click="isFollow=!isFollow"></view>
			</view>
			<view class="box-item-operate">
				<view class="iconfont icon-aixin" :class="isLike?'red':''" @click="isLike=!isLike"></view>
				<view class="box-item-number">{{item.loveNumber}}</view>
			</view>
			<view class="box-item-operate">
				<view class="iconfont icon-pinglun"></view>
				<view class="box-item-number">{{item.commentNumber}}</view>
			</view>
			<view class="box-item-operate">
				<view class="iconfont icon-zhuanfa"></view>
				<view class="box-item-number">{{item.shareNumber}}</view>
			</view>
			<view class="box-item-music">
				<image src="@/static/imgs/music1.jpg"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["item"],
		data(){
			return {
				isFollow:false,
				isLike:false
			}
		}
	}
</script>

<style>
	.qilin-card-rightOperate{
		position:absolute;
		width:30%;
		bottom:120rpx;
		right:0;
		color:#fff;
		z-index:2;
		padding:20rpx 10rpx 20rpx 20rpx;
	}
	.box-item{
		display:inline-block;
		width:50%;
		text-align: center;
		float: right;
	}
	.box-item-image{
		width:80rpx;
		height:80rpx;
		margin:0 auto;
		position:relative;
	}
	.guanzhu{
		width:36rpx;
		height:36rpx;
		border-radius:50%;
		background-color:red;
		color:#fff;
		text-align:center;
		line-height:36rpx;
		position:absolute;
		left:50%;
		bottom:-20%;
		transform: translateX(-50%);
		font-size:20rpx!important;
		font-weight:bolder;
	}
	.box-item-operate{
		width:80rpx;
		margin:30rpx auto 0;
	}
	.iconfont{
		font-size:50rpx;
	}
	.box-item-number{
		font-size:20rpx;
	}
	.box-item-music{
		width:80rpx;
		height:80rpx;
		margin:40rpx auto 0;
		animation-name:rotate;
		animation-duration:2s;
		animation-timing-function:linear;
		animation-delay:0s;
		animation-iteration-count:infinite;
	}
	image{
		width:100%;
		height:100%;
		border-radius:50%;
	}
	.red{
		color:red;
	}
	
	
	
	
	
	
	@keyframes rotate{
		0%{
			transform:rotate(0deg);
		}
		100%{
			transform:rotate(360deg);
		}
	}
</style>
